<template>
  <div :class="className">
    <div v-html="css"></div>
    <van-sticky v-if="datas.is_top_fixed == 1">
      <div class="scanpicture-box" id="flex-align">
        <div class="location" id="flex-align" @click='tolocation' v-if="datas.show_location==0">
          <i class="iconfont icon-order_locate"></i>
          <span class="title">{{ address || '全国' }}</span>
          <i class="iconfont icon-advertise-next"></i>
        </div>
        <div class="scanpicture-item" id="flex-align" @click='tosearch'>
          <template v-if="datas.scanpicture_style == 1">
            <div id="flex-align" style="flex: 1;" @click.stop="tosearch">
              <i class="iconfont icon-all_search_2"></i>
              <span>{{ datas.search_title }}</span>
            </div>
            <div @click.stop>
              <van-uploader :after-read="multipleMethod">
                <i class="iconfont icon-photobzhaoxiang" ></i>
              </van-uploader>
            </div>
          </template>
          <template v-if="datas.scanpicture_style == 2">
            <div id="flex-align" style="flex: 1; height: 100%;">
              <i class="iconfont icon-saoyisao" @click.stop="scanCode"></i>
              <div class="line"></div>
              <span @click.stop='tosearch' style="flex: 1; margin: 0 8px;">{{ datas.search_title }}</span>
            </div>
            <div @click.stop>
              <van-uploader :after-read="multipleMethod">
                <i class="iconfont icon-photobzhaoxiang" @click.stop></i>
              </van-uploader>
            </div>
          </template>
          <template v-if="datas.scanpicture_style == 3">
            <div id="flex-align" style="flex: 1;">
              <i class="iconfont icon-all_search_2"></i>
              <span>{{ datas.search_title }}</span>
            </div>
            <i class="iconfont icon-saoyisao" @click.stop="scanCode" style="padding: 0 4px;"></i>
            <div class="line"></div>
            <div @click.stop class="photobzhaoxiang-box" style="padding-left: 4px;">
              <van-uploader :after-read="multipleMethod">
                <i class="iconfont icon-photobzhaoxiang" ></i>
              </van-uploader>
            </div>
          </template>
        </div>
        <i class="iconfont icon-saoyisao" @click.stop="scanCode" style="margin: 0 8px;" v-if="datas.scanpicture_style == 1"></i>
      </div>
    </van-sticky>
    <template v-else>
        <div class="scanpicture-box" id="flex-align">
        <div class="location" id="flex-align" @click='tolocation' v-if="datas.show_location==0">
          <i class="iconfont icon-order_locate"></i>
          <span class="title">{{ address || '全国' }}</span>
          <i class="iconfont icon-advertise-next"></i>
        </div>
        <div class="scanpicture-item" id="flex-align" >
          <template v-if="datas.scanpicture_style == 1">
            <div id="flex-align" style="flex: 1;" @click.stop="tosearch">
              <i class="iconfont icon-all_search_2"></i>
              <span>{{ datas.search_title }}</span>
            </div>
            <div @click.stop>
              <van-uploader :after-read="multipleMethod">
                <i class="iconfont icon-photobzhaoxiang" ></i>
              </van-uploader>
            </div>
          </template>
          <template v-if="datas.scanpicture_style == 2">
            <div id="flex-align" style="flex: 1; height: 100%;">
              <i class="iconfont icon-saoyisao" @click.stop="scanCode"></i>
              <div class="line"></div>
              <span style="flex: 1; margin: 0 8px;" @click.stop="tosearch">{{ datas.search_title }}</span>
            </div>
            <div @click.stop>
              <van-uploader :after-read="multipleMethod">
                <i class="iconfont icon-photobzhaoxiang" @click.stop></i>
              </van-uploader>
            </div>
          </template>
          <template v-if="datas.scanpicture_style == 3">
            <div id="flex-align" style="flex: 1;"  @click.stop="tosearch">
              <i class="iconfont icon-all_search_2"></i>
              <span>{{ datas.search_title }}</span>
            </div>
            <i class="iconfont icon-saoyisao" style="padding: 0 4px;" @click.stop="scanCode"></i>
            <div class="line"></div>
            <div @click.stop class="photobzhaoxiang-box" style="padding-left: 4px;">
              <van-uploader :after-read="multipleMethod">
                <i class="iconfont icon-photobzhaoxiang" ></i>
              </van-uploader>
            </div>
          </template>
        </div>
        <i class="iconfont icon-saoyisao" @click.stop="scanCode" style="margin: 0 8px;" v-if="datas.scanpicture_style == 1"></i>
      </div>
    </template>
  </div>
</template>

<script>
const css = function () {
  const {
    preview_color,
    border_style,
    search_border_radius,
    bg_color,
    border_color,
    font_color,
    city_font_color,
    photograph_color,
    scan_color,
  } = this.datas;
  let c = `.component-${this.id}`;
  return `
        ${c} .scanpicture-box{
            background-color: ${preview_color.color || '#f8f8f8'};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
        ${c} .scanpicture-box .location{
          color: ${city_font_color};
        }
        ${c} .scanpicture-box .scanpicture-item{
            border-radius: ${search_border_radius}px;
            border: solid  ${border_style}px ${border_color};
            background-color: ${bg_color || '#f8f8f8'};
            color: ${font_color};
        }
        ${c} .scanpicture-box .scanpicture-item .icon-photobzhaoxiang{
          color:${photograph_color.isColor ? photograph_color.color : ""};
          margin-top:4px;
        }
        ${c} .scanpicture-box  .icon-saoyisao{
          color:${scan_color.isColor ? scan_color.color : ""}
        }
        ${c} .scanpicture-box .scanpicture-item .line{
          width: 1px;
          background-color:${preview_color.color || '#f8f8f8'};
          height:60%;
          margin:0 2px;
        }
    `;
};
export default {
  props: ['id', 'datas', 'isfollow'],
  data() {
    return {
      res:{},
      address: "全国",
      point: {},
      city: "",
      img_url:"999"
    };
  },

  computed: {
    css() {
      return '<style>' + css.call(this) + '</style>';
    },
    className() {
      const name = ['component-wrapper', `component-${this.id}`];
      return name;
    },
  },
  mounted() {
    this.ready();
  },
  activated() {
    this.ready();
  },
  methods: {
    tolocation() {
      this.$router.push(this.fun.getUrl('o2oLocation'));
    },
    ready() {
      this.$store.commit('setReferer', window.location.href);
      this.$nextTick(() => {
        this.oDiv = document.getElementById(`scanpicture-box-${this.id}`);
      });
      window.addEventListener("scroll", this.handleScroll);
      this.fun.getLocation().then((res) => {
        this.point = res.point;
        this.address = res.title;
        this.city = res.city;
      });
    },
    tosearch() {
      // if (!this.city) return this.$toast('请先选择城市');

      // let search_type = this.datas.search_type || 'store';
      // this.$router.push(this.fun.getUrl('o2oSearchMultiple', { city: this.city, point: JSON.stringify(this.point), fromHome: 1 }, { search_type }));
      this.$router.push(this.fun.getUrl('search', { }, { }));
    },
    scanCode() {
      wx.scanQRCode({
        needResult: 1,
        scanType: ["qrCode"],
        success: ({resultStr}) => {
          window.location.href = resultStr;
        },
        fail: (res) => {
          console.log(res);
          alert('扫码失败');
        }
      });
    },
    camera(){},
    multipleMethod(e, flag) {
      if (e && e.length) {
        for (let i = 0; i < e.length; i++) {
          this.onRead(e[i], flag);
        }
      } else this.onRead(e, flag);
    },
    onRead(e, flag) {
      e.status = "uploading";
      e.message = "上传中...";
      let fd = new FormData();
      fd.append("file", flag === true?e:e.file);
      // if (flag === true) {
      //   fd.append("file", e); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      // } else {
      //   fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      // }
      let uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      let headers = { "Content-Type": "multipart/form-data" };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '正在搜索中...',
        selector: '#custom-selector',
      });
      axios.post(uploadUrl, fd, {headers}).then(({data:{result,msg,data}}) => {
          this.$toast.clear();
          if (result === 1) {
            e.status = "done ";
            this.img_url = data.img_url;
            localStorage.setItem("scanpicture-url",data.img_url);
            this.$router.push(this.fun.getUrl("scanpictureGoods"));
            console.log(data.img_url);
          } else {
            this.$toast(responseData.msg);
            e.status = "failed";
            e.message = "上传失败";
          }
        })
        .catch(error => {
          this.$toast.clear();
          console.log(error);
        });
    },
  }
};
</script>

<style lang="scss" scoped>
#flex-align {
  display: flex;
  align-items: center;
  .icon-photobzhaoxiang { font-size: 20px; }
  .photobzhaoxiang-box { margin-top: 4px; }
}

#flex1 {
  flex: 1;
}

.scanpicture-box {
  height: 45px;
  padding: 0 10px;
  text-align: left;

  .location {
    max-width: 40%;

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .scanpicture-item {
    flex: 1;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
  }
}
</style>